<template>
  <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      label-position="right"
  >
    <el-form-item label="部门编号" prop="departmentCode">
      <el-input
          v-model="formData.departmentCode"
          placeholder="请输入部门编号"
          clearable
      />
    </el-form-item>

    <el-form-item label="部门名称" prop="departmentName">
      <el-input
          v-model="formData.departmentName"
          placeholder="请输入部门名称"
          clearable
      />
    </el-form-item>

    <el-form-item label="当前人数" prop="departmentStaffNumber">
      <el-input-number
          v-model="formData.departmentStaffNumber"
          :min="0"
          :controls="false"
          style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="历史人数" prop="departmentHistoryStaffNumber">
      <el-input-number
          v-model="formData.departmentHistoryStaffNumber"
          :min="0"
          :controls="false"
          style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="备注" prop="remarks">
      <el-input
          v-model="formData.remarks"
          type="textarea"
          :rows="3"
          placeholder="请输入备注信息"
      />
    </el-form-item>

    <el-form-item class="form-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  name: 'DepartmentForm',
  props: {
    formData: {
      type: Object,
      required: true,
      default: () => ({
        departmentId: null,
        departmentCode: '',
        departmentName: '',
        departmentStaffNumber: 0,
        departmentHistoryStaffNumber: 0,
        remarks: ''
      })
    }
  },
  emits: ['submit', 'cancel'],
  setup(props, { emit }) {
    const formRef = ref(null);

    const rules = reactive({
      departmentCode: [
        { required: true, message: '请输入部门编号', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
      ],
      departmentName: [
        { required: true, message: '请输入部门名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
      ],
      departmentStaffNumber: [
        { required: true, message: '请输入当前人数', trigger: 'blur' },
        { type: 'number', min: 0, message: '人数不能为负数', trigger: 'blur' }
      ],
      departmentHistoryStaffNumber: [
        { required: true, message: '请输入历史人数', trigger: 'blur' },
        { type: 'number', min: 0, message: '人数不能为负数', trigger: 'blur' }
      ]
    });

    const handleSubmit = () => {
      formRef.value.validate(valid => {
        if (valid) {
          emit('submit', props.formData);
        } else {
          return false;
        }
      });
    };

    const handleCancel = () => {
      emit('cancel');
    };

    return {
      formRef,
      rules,
      handleSubmit,
      handleCancel
    };
  }
};
</script>

<style scoped>
.form-footer {
  text-align: right;
  margin-top: 30px;
}

/* 调整输入框宽度 */
.el-input, .el-textarea {
  width: 100%;
}

/* 调整数字输入框样式 */
.el-input-number {
  width: 100%;
}
</style>